<!-- 菜单组件 -->
<script setup lang="ts">
import {LayoutIcon,SupportIcon,InternetIcon,CurrencyExchangeIcon,TreeSquareDotIcon,CastIcon,LogoutIcon} from 'tdesign-icons-vue-next'

const router=useRouter()

interface  Imenu{
  menuId:number
  menu:string
  icon:IconType
  url:string
}

// 定义图标类型
type IconType = 'LayoutIcon' | 'SupportIcon' | 'InternetIcon' | 'CurrencyExchangeIcon'|'TreeSquareDotIcon'|'CastIcon'|'LogoutIcon';

const items = ref<Imenu[]>([
  { menuId:1, menu:'系统工作台', icon:"LayoutIcon",url:'/home'  },
  { menuId:2, menu:'运营管理', icon:"LayoutIcon",url:''  },
  { menuId:3, menu:'智能运维', icon:"SupportIcon",url:''   },
  {  menuId:4,menu:'工单系统', icon:"InternetIcon",url:''   },
  { menuId:5, menu:'数据中台', icon:"CurrencyExchangeIcon",url:''   },
  {  menuId:6,menu:'调度中心', icon:"TreeSquareDotIcon",url:''  },
  { menuId:7, menu:'系统配置', icon:"CastIcon",url:'/system'   },
  {  menuId:8,menu:'退出系统', icon:"LogoutIcon",url:'' },
]);

const menuid=items.value.find(item=>item.menuId)

console.log('menuid',menuid);

const selectedIndex = ref(1);

const selectItem = (index:any) => {
  selectedIndex.value = index;
};

const icons:Record<IconType, any>={
  LayoutIcon,SupportIcon,InternetIcon,CurrencyExchangeIcon,TreeSquareDotIcon,CastIcon,LogoutIcon
}
</script>

<template>
  <div class="h-[98px] w-full flex items-center justify-center" style="box-shadow: inset 0 -0.5px 0 #9B9BA2;">
    <img class="h-[48px] w-[180px]" src="@/assets/image/baseLogo-light.png" alt="logo">
  </div>
  <div class="">
    <ul class="w-full mt-4">
      <li
          v-for="(item, index) in items"
          :key="index"
          class="tracking-widest font-medium"
          :class="['relative', 'p-4', 'cursor-pointer',{'text-white': selectedIndex === item.menuId, 'text-gray-400': selectedIndex !== item.menuId},'text-xl', { 'selected': selectedIndex === item.menuId }]"
          @click="selectItem(item.menuId)"
      >
      <span
          class="absolute inset-y-0 left-0 w-1 rounded-r-lg transition-all duration-300"
          :class="{'bg-white': selectedIndex === item.menuId, 'bg-transparent': selectedIndex !== item.menuId}"
      ></span>
        <component :is="icons[item.icon]"
                   class="mr-3" :class="{'text-white': selectedIndex === item.menuId, 'text-gray-400': selectedIndex !== item.menuId}" />
        {{ item.menu }}
      </li>
    </ul>
  </div>

</template>

<style scoped lang="scss">
li {
  background-color: transparent;
  transition: background-color 0.3s;
  @apply flex flex-row items-center justify-center;
}

li:hover {
  background-color: transparent;
}

.selected {
  background-color: transparent;
}

.selected span {
  background-color: #ffffff;
}
</style>